<script setup lang="ts">
import { articleInfoApi } from '~/server/activityApi'
import { ref } from 'vue'

const route = useRoute()
const techExchangeId = ref<number>(Number(<string>route.query.techExchangeId))

//窗口的高度
const { getWindowHeight } = useScrollHeight()
const ScrollHeight = ref<number>(getWindowHeight() - 176 - 60)

const { data: articleInfo, pending: listLoading } = await useAsyncData(async () => articleInfoApi(techExchangeId.value))
const splitTags = (tag?: string) =>
  (tag || '')
    .split(/[，,、；;]+/)
    .map((s) => s.trim())
    .filter(Boolean)
</script>

<template>
  <div class="wrapper_1200">
    <page-header
      :title="articleInfo.title"
      :navigateToTitle="{ title: '技术交流', linkUrl: '/activity/tech-exchange', params: {} }"
    ></page-header>
    <div
      class="py-50px px-60px bg-#FFFFFF borRadius w-1200px"
      v-loading="listLoading"
      :style="{ minHeight: ScrollHeight - 30 + 'px' }"
    >
      <div class="text-#333 text-24px text-center mb-30px">{{ articleInfo.title }}</div>
      <div v-if="splitTags(articleInfo.tag).length" class="tag-list mb-16px">
        <span v-for="t in splitTags(articleInfo.tag)" :key="t" class="tag-chip">{{ t }}</span>
      </div>
      <div class="mt-28px flex-y-center text-#999 text-14px flex-x-center mb-40px">
        <span class="iconfont icon-zuji mr-5px"></span>
        <span>{{ articleInfo.createTime }}</span>
        <span class="iconfont icon-liulan ml-20px mr-5px"></span>
        <span>{{ articleInfo.visit }}</span>
      </div>
      <div v-if="articleInfo.videoUrl" class="mb-30px">
        <video
          class="w-100% h-400px borRadius overflow-hidden"
          :src="articleInfo.videoUrl"
          :poster="articleInfo.videoThumbnailUrl || ''"
          controls
          preload="none"
        ></video>
      </div>
      <div class="htmlClass" v-html="articleInfo.content"></div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.tag-chip {
  background-color: #f5f7fa;
  color: #666;
  font-size: 12px;
  border-radius: 12px;
  padding: 2px 10px;
  border: 1px solid #e5e7eb;
}
</style>
